<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>软件列表</title>
    <link rel="stylesheet" th:href="@{css/animate.css}">
</head>
<body>
<h3>欢迎 <span th:text="${session.loginUser.username}"></span> 登录 &emsp; <a href="signOut" style="color: #CCCCCC">退出登录</a></h3>
<h4><a href="https://www.kettle.net.cn/animate/index.html">https://www.kettle.net.cn/animate/index.html</a></h4>
<h3>输入搜索关键字：<input style="width: 300px; height: 30px" type="search" oninput="selectFile(this)"></h3>
<h3 id="detailText" style="color: red" ></h3>
<table id="tableList" >

</table>
<script th:src="@{js/jquery-2.1.4.min.js}"></script>
<script>
    $(function () {
        loadData("");
    })

    // id拼接常量
    var COMMENT = "Comment";
    var COMMENT_TABLE = "commentTable";
    var TR = "TR";
    var TEXT = "text";

    // 根据关键字查询软件
    function selectFile(val) {
        var key = val.value;
        loadData(key);
    }
    // 加载软件列表
    function loadData(key) {
        $.get("ajaxGetFiles", "nameOrTitle=" + key, function (result) {
            $("#tableList").html("")
            if (result.code == -1){
                $("#detailText").html(result.msg)
            } else{
                $("#detailText").html("")
                var html = "<tr align='center'>"
                            +"<th width='5%'>ID</th>"
                            +"<th width='5%'>LOGO</th>"
                            +"<th width='20%'>下载文件</th>"
                            +"<th width='5%'>文件大小</th>"
                            +"<th width='30%'>文件描述</th>"
                            +"<th width='10%'>创建时间</th>"
                            +"<th width='10%'>更新时间</th>"
                            +"<th width='5%'>下载次数</th>"
                            +"<th width='5%'>操作</th>"
                           +"</tr>";
                $.each(result.data, function (index, item) {
                            if (index % 2 == 0){
                                html += "<tr id='" + TR +item.fileId+"' style='background-color: #A9C7E1;'>"
                            }else{
                                html += "<tr id='" + TR +item.fileId+"'>"
                            }
                            html += "<td align='center'>"+(index + 1)+"</td>"
                                +"<td align='center'><img width='40px' height='40px' src='"+item.fileLogo+"' alt='NONE'></td>"
                                +"<td align='center'><span style='cursor: pointer;color: blue;' id='"+item.fileId+"' url='"+item.fileUrl+"' fileName='"+item.fileName+"'  onclick='downLoadFile("+item.fileId+")'><u>"+item.fileName+"</u></span></td>"
                                +"<td align='center'>"+item.fileSize+"</td>"
                                +"<td align='center'>"+item.fileTitle+"</td>"
                                +"<td align='center' >"+item.createTime.replace("T", " ")+"</td>"
                                +"<td align='center' >"+item.updateTime.replace("T", " ")+"</td>"
                                +"<td align='center' >"+item.downloadCount+"</td>"
                                +"<td align='center' onclick='getComment("+item.fileId+")' style='font-family: 华文楷体; color: #996319;  cursor: pointer;'><strong>评论</strong></td>"
                            +"</tr>";
                })
                $("#tableList").html(html);
            }
        })
    }
    // 下载文件
    function downLoadFile(fileId) {
        var file = $("span[id='"+fileId+"']");
        var url = file.attr("url");
        var fileName = file.attr("fileName");
        var strings = url.split("\\");
        window.location.href="download?url=" + strings + "&name=" + fileName + "&fileId=" + fileId;
    }

    // 点击查看评论
    function getComment(fileId) {
        $("#" + fileId + COMMENT).remove();
        $.get("/comment/getFileComment?fileId=" + fileId, function (result) {
            var commentHtml = "<table width='100%' class='animated flipInX' id='"+COMMENT_TABLE+fileId+"'>";
            if (result.code == 1){
                $.each(result.data, function (index, item) {
                    if (index % 2 == 0){
                        commentHtml += "<tr style='background-color: #e6f1fe; height: 25px'>";
                    } else{
                        commentHtml += "<tr style='background-color: #e1c192; height: 25px'>";
                    }
                    commentHtml += "<td width='15%'>"+item.createTime.replace("T", " ")+"</td>";
                    commentHtml += "<td width='50%'>"+item.commentContent+"</td>";
                    commentHtml += "</tr>";
                })

            }
            commentHtml += "<tr >";
            commentHtml += "<td width='15%' style='text-align: right; font-family: 华文楷体; font-size: 18px'>我要说</td>";
            commentHtml += "<td width='50%'><textarea name='' id='"+ TEXT + fileId+"' cols='60' rows='5' placeholder='请输入评论内容'></textarea> <button style='cursor: pointer' onclick='publishComment("+fileId+")'>说完了</button><button onclick='removeComment("+fileId+")'>收起</button></td>";
            commentHtml += "</tr>";
            commentHtml += "</table>";
            var app = "<tr id='"+fileId + COMMENT +"'>"
                +"<td align='center' colspan='9'>" + commentHtml +"</td>"
                +"</tr>";
            $("#" + TR + fileId).after(app)
        })
    }

    // 提交评论
    function publishComment(fileId){
        var text = $.trim($("#" + TEXT + fileId).val());
        if (text.length == 0){

        } else{
            $.post("/comment/insertComment", {"commentContent": text, "fileId": fileId}, function (result) {
                if (result){
                    var commentHtml = "<tr style='height: 25px'>";
                    commentHtml += "<td width='15%' style='text-align: right; font-family: 华文楷体; font-size: 18px'>我说的</td>";
                    commentHtml += "<td width='50%'>" + text + "</td>";
                    commentHtml += "</tr>";
                    $("#" + COMMENT_TABLE + fileId).prepend(commentHtml);
                } else{
                    alert("慢点评论吧")
                }

            })
        }
    }

    // 收起评论列表
    function removeComment(fileId) {
        $("#" + COMMENT_TABLE+fileId).attr("class","animated hinge");
        $("#" + fileId + COMMENT).hide(1000);
    }

</script>
</body>
<style>
    tr{
        height: 50px;
    }
    tr:hover{
        background-color: #CCC !important;
    }
    /*tr:nth-child(2n){*/
        /*background-color: #A9C7E1;*/
    /*}*/
</style>
</html>